<template>
  <!-- 视图容器  class="pullList" -->
  <van-pull-refresh class="pullList" v-model="refreshing" @refresh="onRefresh">
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell class="banner-cell" v-if="swipeFlag">
        <!-- 轮播图 -->
        <video-swipe></video-swipe>
      </van-cell>
      <!-- 视屏区 -->
      <van-cell v-for="(item, index) in myConfig" :key="index">
        <div class="video-view-box">
          <!-- <div class="video-view-box__item" v-for="index in 8" :key="index">
            <video-small class="movie-cell" />
          </div> -->
          <!-- <div>{{ item }}</div> -->
          <video-medium
            class="open-movie"
            :id="item.id"
            :config="item"
            :flagData="myFlag"
            :xIndex="index"
          ></video-medium>
        </div>
      </van-cell>
    </van-list>
  </van-pull-refresh>
</template>

<script>
import videoMedium from '@/components/video-box/video-medium'
import videoSwipe from '@/components/video-box/video-swipe'
import { reactive, ref } from 'vue'
export default {
  components: {
    videoMedium,
    videoSwipe
  },
  setup() {
    const myConfig = reactive([
      { video: 'http://192.168.24.36:3000/zxcu.m3u8', id: 'ceshi1', flag: false },
      { video: 'http://192.168.24.36:3000/zxcu.m3u8', id: 'ceshi2', flag: false },
      { video: 'http://192.168.24.36:3000/zxcu.m3u8', id: 'ceshi3', flag: false },
      { video: 'http://192.168.24.36:3000/zxcu.m3u8', id: 'ceshi4', flag: false },
      { video: 'http://192.168.24.36:3000/zxcu.m3u8', id: 'ceshi5', flag: false },
      { video: 'http://192.168.24.36:3000/zxcu.m3u8', id: 'ceshi6', flag: false },
      { video: 'http://192.168.24.36:3000/zxcu.m3u8', id: 'ceshi7', flag: false },
      { video: 'http://192.168.24.36:3000/zxcu.m3u8', id: 'ceshi8', flag: false },
      { video: 'http://192.168.24.36:3000/zxcu.m3u8', id: 'ceshi9', flag: false },
      { video: 'http://192.168.24.36:3000/zxcu.m3u8', id: 'ceshi10', flag: false },
      { video: 'http://192.168.24.36:3000/zxcu.m3u8', id: 'ceshi11', flag: false },
      { video: 'http://192.168.24.36:3000/zxcu.m3u8', id: 'ceshi12', flag: false }
    ])
    const myFlag = ref(myConfig)
    const count = ref(0)
    const list = ref([])
    const loading = ref(false)
    const finished = ref(false)
    const refreshing = ref(false)
    const swipeFlag = ref(false)
    const onLoad = () => {
      setTimeout(() => {
        if (refreshing.value) {
          list.value = []
          refreshing.value = false
        }

        for (let i = 0; i < 2; i++) {
          list.value.push(list.value.length + 1)
        }
        loading.value = false

        if (list.value.length >= 40) {
          finished.value = true
        }
      }, 1000)
    }

    swipeFlag.value = true
    const onRefresh = () => {
      // 清空列表数据
      finished.value = false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      loading.value = true
      onLoad()
    }

    return {
      myConfig,
      list,
      onLoad,
      loading,
      finished,
      refreshing,
      onRefresh,
      swipeFlag,
      myFlag,
      count
    }
  }
}
</script>

<style lang="scss" scoped>
// .vanlist-box {
// ::v-deep .van-list {
//   height: 82vh;
//   overflow-y: scroll;
// }
.pullList {
  height: 81vh;
  overflow-y: auto;
}
::v-deep .van-cell {
  background-color: seashell;
  padding: 0;
}
// 视图容器盒子
.video-view-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  // padding-left: 10px;
  margin-left: 10px;
  &__item {
    flex: 1;
    margin-bottom: 10px;
  }
}
// }
</style>
